.top {
    width: 1250px;
    height: 148px;
    display: flex;
    // background: pink;

    .ant-carousel .slick-prev,
    .ant-carousel .slick-next,
    .ant-carousel:hover .slick-prev,
    .ant-carousel:hover .slick-next {
        font-size: 70px;
        color: #ccc;
    }

    .isInputFocused {
        width: 700px;
        height: 520px;
        background: #fff;
        position: absolute;
        z-index: 99;
        top: 23%;
        overflow-y: scroll;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        // border: 1px #000 solid;

    }

    // 日历
    .calendar {
        position: relative;
        background: #fff;
        border: 1px solid #e6ebed;
        width: 260px;
        height: 72px;
        font-size: 0;
        padding: 12px 16px;
        border-radius: 4px;
        flex-shrink: 0;
        margin-top: 10px;
        border-radius: 10px;
        cursor: pointer;
        .calendar-data {
            position: relative;
            height: 48px;

            .time {
                .time-data {
                    font-family: DIN Alternate;

                    .day {
                        font-size: 24px;
                        font-weight: 600;
                        color: #333;
                        vertical-align: middle;
                        line-height: 1;
                        height: 22px;
                        display: inline-block;
                    }

                    .month {
                        font-size: 14px;
                        font-weight: 600;
                        color: #333;
                        vertical-align: bottom;
                        line-height: 1;
                        display: inline-block;
                    }

                    .year {
                        font-size: 14px;
                        font-weight: 600;
                        color: #333;
                        vertical-align: bottom;
                        line-height: 1;
                        display: inline-block;
                    }
                }

                .time-cn {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }

            .common-banner {
                // width: 70px;
                line-height: 48px;
                // background: red;

            }

            .calendar-banner {

                position: absolute;
                right: 10px;
                top: 0;
                height: 48px;
                border-radius: 4px;
                overflow: hidden;

                span {
                    display: inline-block;
                    font-size: 14px;
                    font-weight: 600;
                    color: #222;
                    line-height: 55px;
                    padding-left: 10px;

                }
            }

        }
    }
    .Acalendar{
        position: relative;
         .calendar-calendar {
            position: absolute;
            left: -1px;
            top: 72px;
            z-index: 99;
            background: #ffffff;
            border: 1px solid #e6ebed;
            width: 800px;
            height: 470px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;


            .calendar-calendar-right {
                width: 200px;
                height: 470px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 99;
                text-align: center;
                overflow: hidden;
                overflow-y: scroll;
                ul{
                    list-style:none;
                    display: flex;
                    color: "#666666";
                    font-size: 13px
                }
                p{
                    width: 130px;
                    padding: 5px;
                    background: #F5F7FB;
                    margin-left: 40px;
                    border-radius: 5px;
                    text-align: left;
                    line-height: 25px;
                    font-size: 12px;
                    font-weight: 600;
                    span{
                        color: #026B10;
                        padding: 5px;
                        font-size: 20px;
                    }
                }
            }
        }
    }
    

    .input-draft {
        width: 700px;
        height: 520px;
        // border: 1px #000 solid;
        overflow: hidden;

        .top {
            width: 700px;
            height: 370px;
            display: block;

            // background-color: blue;
            div {
                width: 400px;
                height: 18px;
                font-weight: 600;
                line-height: 18px;
                margin-bottom: 5px;

                .img {
                    width: 20px;
                    height: 20px;
                }
            }

            .center {
                display: flex;

                .left {
                    dl {
                        width: 300px;
                        height: 60px;
                        background: linear-gradient(90deg, #ffe5e5, #fff);
                        border-radius: 10px;
                        padding: 5px;
                        margin: 5px 0px;

                        dt {
                            img {
                                width: 50px;
                                height: 50px;
                                border-radius: 10px;
                                float: left;
                            }
                        }

                        dd {
                            p {
                                font-weight: normal;
                                margin-left: 20px;
                                margin-top: -5px;
                            }

                        }
                    }
                }

                .right {
                    display: block;
                    margin-left: 20px;
                    padding-left: 20px;

                    dl {
                        width: 300px;
                        height: 60px;
                        border-radius: 10px;
                        padding: 5px;
                        margin: 5px 0px;

                        dt {
                            img {
                                width: 50px;
                                height: 50px;
                                border-radius: 10px;
                                float: left;
                            }
                        }

                        dd {
                            p {
                                font-weight: normal;
                                margin-left: 20px;
                                margin-top: -5px;
                            }

                        }
                    }
                }
            }
        }

        .bottom {
            width: 620px;
            height: 150px;
            overflow: hidden;
            flex: 1;

            .bottom-top {
                margin-top: -10px;

                p {
                    font-size: 13px;
                    font-weight: 600;

                    span {
                        font-size: 12px;
                        color: #ccc;
                        float: right;

                    }
                }

            }

            .bottom-bottom {
                // background-color: yellow;
                display: flex;
                height: 200px;

                video {
                    width: 125px;
                    height: 85px;
                    cursor: pointer;
                }
            }
        }
    }

    .carousel {
        width: 450px;
        height: 130px;

        .div {
            width: 450px;
            height: 130px;

            dl {
                float: left;
                width: 80px;
                height: 130px;
                margin: 0 15px;

                // border: 1px #000 solid;
                dt {
                    width: 80px;
                    height: 80px;
                    // background-color: red;
                    margin-bottom: 5px;

                    img {
                        width: 80px;
                        height: 80px;
                        cursor: pointer;
                    }

                }

                dd {
                    width: 80px;
                    height: 30px;
                    // background: pink;
                    margin-left: -1px;
                    line-height: 30px;
                    text-align: center;
                }
            }
        }

    }

}

video::-webkit-media-controls-timeline {
    display: none;
}
// 热门推荐
.hot {
    width: 1250px;
    height: 250px;
    // background: pink;
    // margin-top: 1000px;
    position: relative;

    .img1 {
        width: 85%;
        height: 200px;
        margin-top: -20px;
        margin-left: 10%;
        cursor: pointer;
    }

    .hot-div {
        width: 150px;
        height: 40px;
        line-height: 40px;
        position: absolute;
        left: 50%;
        background: #CDB6B6;
        border-radius: 20px;
        text-indent: 15px;
        margin-top: 130px;
        font-size: 13px;
        display: none;

        p {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: #000;
            color: #fff;
            border-radius: 50%;
            line-height: 30px;
            margin-top: -20px;
            margin-left: 18px;
        }
    }

    .img1:hover.hot-div {
        display: block;
    }
}
// 创作工具
.create {
    width: 100%;
    height: 218px;

    .left {
        display: flex;
        height: 150px;
        .left-left {
            width: 180px;
            background: pink;
            border-radius: 10%;
            padding-left: 20px;
            padding-top: 5px;
            position: relative;

            p {
                font-size: 15px;
                padding: 5px;
            }
        }

        .left-center {
            width: 180px;
            background: pink;
            border-radius: 10%;
            padding-left: 20px;
            padding-top: 5px;
            margin: 0px 10px;
            position: relative;

            p {
                font-size: 15px;
                padding: 5px;
            }
        }

        .left-right {
            width: 180px;
            background: pink;
            border-radius: 10%;
            padding-left: 20px;
            padding-top: 5px;
            position: relative;

            p {
                font-size: 15px;
                padding: 5px;
            }
        }

        .start {
            font-size: 12px;
            color: #CDD0D5;
            margin-top: -10px;
        }

        .createimg {
            width: 120px;
            height: 70px;
            position: absolute;
            bottom: -20px;
            right: -20px;
            border-radius: 5% 0 10% 0;
            transition: right 0.5s, bottom 0.5s;
        }

        .hover-container {
            width: 100%;
            border-radius: 8%;
            height: 100%;
            background: yellow;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        .des {
            margin: 0;
            position: absolute;
            left: -10%;
            /* 初始位置在盒子外面 */
            transition: left 0.5s ease;
            /* 平滑过渡效果 */
        }

        .hover-container:hover .des {
            left: 10%;
            /* 鼠标悬停时，文字移动到盒子内 */
        }

        .hover-container:hover .createimg {
            right: 0px;
            /* 最终位置 */
            bottom: 0px;
            /* 最终位置 */
        }
    }

    .right {
        display: flex;

        // background: yellowgreen;
        .right-left {
            margin-left: 15px;

            .right-left-top {
                display: flex;
                width: 180px;
                height: 55px;
                background: pink;

                img {
                    width: 20px;
                    height: 20px;
                    line-height: 55px;
                }
            }

            .right-left-bottom {
                display: flex;
                width: 180px;
                height: 55px;
                background: pink;
                margin-top: 20px;
            }
        }
    }

}

// .calendar-container {
//   width: 400px;
//   margin: 0 auto;
//   background: #fff;
//   z-index: 999;
// }

// .calendar-header {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   margin-bottom: 10px;
// }

// .custom-date-cell {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
// }

// .solar-date {
//   font-size: 16px;
//   font-weight: bold;
// }

// .lunar-date {
//   font-size: 12px;
//   color: #888;
// }
